<template>
 <view>
  <view class="page-body">
   <view class="page-section page-section-gap">
    <!-- 
     :subKey="'QBWBZ-6SP6V-GPLPI-UNVUZ-3C6CV-UIBEG'"
     layer-style='1' -->
     
    <map id="map" 
     subKey='V7FBZ-PE56X-HFL4Y-THMXJ-TWNRE-WLBQ6'
     layer-style='1'
      scale='14'
     :markers="covers" 
     style="width: 750rpx; height: 450px;" 
     show-location 
     @markertap="markerTap" 
     :customCallout='custom' 
     :latitude="latitude" 
     :longitude="longitude" 
     @callouttap='jumpPage'
     @regionchange='regionchange'
    >
     
     <cover-view slot='callout'>
      <cover-view class="back" v-for=" (item,index) in list" :key="index" :markerId='index'>
       <cover-view class="callout">
        <cover-image :src="item.thumb_img"></cover-image>
        <cover-view class="callout-name">
         <cover-view class="word-line-clamp1">{{item.name}}</cover-view>
         <cover-view>已有{{item.appointmentCount}}人预约 ></cover-view>
        </cover-view>
       </cover-view>
       <!-- <cover-view class="row-2"></cover-view> -->
      </cover-view>
     </cover-view>
    </map>
    <cover-image v-if="searchList.length<=0" class="origin-hover" src="../../static/index/region.png" @click="backOrgin"></cover-image>
   </view>
  </view>
  <!-- 地址搜索 -->
  <view class="search-input">
   <view class="search-input-box">
    <image src="../../static/index/search.png" mode="aspectFill"></image>
    <input type="text" placeholder="搜索地点" @input="inputAdress">
   </view>
  </view>
  <view class="search-list-box" v-if="searchList.length>0">
   <view class="search-result" v-for=" (item , index) in searchList" :key="index"  @click="SearchAddressMed(index)">
    <view class="search-item">
     <image src="../../static/index/distance.png" mode="aspectFill"></image>
     <view class="search-name">
      <view>{{item.title}}</view>
      <view>{{item.address}}</view>
     </view>
    </view>
   </view>
  </view>
  <view :style="'height: 100%;padding-bottom:'+bottomTabbar+'px;'" class="search-box" v-if="searchList.length<=0">
  <!-- <scroll-view :scroll-y="true" :style="'height: 100%;padding-bottom:'+bottomTabbar+'px;'" class="search-box"> -->
    <view class="search-result" v-for=" (item , index) in list" :key="index" @click="addressMed(index)">
     <view class="search-item">
      <image src="../../static/index/distance.png" mode="aspectFill"></image>
      <view class="search-name">
       <view>{{item.name}} <text>{{item.distance}}</text> </view>
       <view>{{item.address}}</view>
      </view>
      <image class="active-search" src="../../static/index/in.png" v-if="item.isSelect"></image>
     </view>
    </view>
  <!-- </scroll-view> -->
  </view>
 </view>
</template>

<script>
 var app = getApp();
 import QQMapWX from 'lib/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js';
 import Map from 'js_sdk/ms-openMap/openMap.js'
 var qqmapsdk = new QQMapWX({
  key: 'IYIBZ-3DC6U-HRYVF-2E3CJ-OSJDS-E5FDF' 
 });
 
 import { apiGetNearbyStores } from '../../apis/index.js';
 export default {
  data() {
   return {
    key:'Q7HBZ-Z4Z63-OH23Q-3O5ZR-AQQPJ-5WFO6',
    style:'1',
    id:'map', // 使用 marker点击事件 需要填写id
    title: 'map',
    list:[],
    searchList:[],
    covers:[],
    currentPage:1,
    pageSize:10,
    isLastPage:false,
    keyWord:'',
    adCode:'',
    latitude:app.globalData.latitude,
    longitude:app.globalData.longitude,
    allHeight:0,
    bottomTabbar :0,
   }
  },
  onLoad() {
   // return

   this.getList()
  },
  onShow() {
   let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的⾼度
   let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
   this.bottomTabbar = uni.getStorageSync('bottomTabbar'); 
  },
  onReachBottom() {
   return
   if(!this.isLastPage){
    this.currentPage++;
    this.getList();
   }
  },
  
  methods:{
   // 回到地图原点
   backOrgin(){// 回到当前位置
    let mpCtx = wx.createMapContext('map') // 这里一定要写你自己的map的id，类似于getElementById
    mpCtx.moveToLocation();
    this.searchList = [];
    this.list = [];
    this.currentPage = 1;
    
    this.latitude = app.globalData.latitude;
    this.longitude =  app.globalData.longitude;
    this.getList();
   },
   regionchange(e){
    return
    if(e.type == 'begin'){
     this.currentPage = 1;
     this.list = [];
     if(!this.isLastPage){
      this.currentPage++;
      this.getList();
     }
    }
   },
   moveTolocation(location){
    let mapObjs = uni.createMapContext('map', this)
    mapObjs.moveToLocation({ 
     latitude: location.lat,
     longitude: location.lng,
    },{
     complete: res=>{
     }
    })
   },
   SearchAddressMed(index){
    this.latitude = this.searchList[index].location.lat;
    this.longitude =this.searchList[index].location.lng;
    this.searchList = [];
    this.list = [];
    this.currentPage = 1;
    this.getList();
   },
   addressMed(index){
    uni.navigateTo({
     url:"/pages/storeDetail/storeDetail?store_id=" + this.list[index].id
    })
   },
   inputAdress(e){
    let that = this;
    that.keyWord = e.detail.value;
    that.searchList = [];
    if(e.detail.value !== ''){
     qqmapsdk.getSuggestion({
      keyword:e.detail.value,
      region:e.detail.value,
      location:{
       latitude:app.globalData.latitude,
       longitude:app.globalData.longitude
      },
      success(loc) {
       that.searchList = that.searchList.concat(loc.data);
      },
      fail(fa){
       
      }
     })
    }else {
     that.searchList = [];
    }
   },
   getList(){
    var that = this;
    uni.showLoading({
     mask:true
    })
    let local =  that.latitude + "," + that.longitude;
    const params ={
     page: that.currentPage,
     page_size: that.pageSize,
     location: local,
     adCode:that.adCode,
     isHot: false,
     tag:0
    }
    apiGetNearbyStores(params).then(res => {
     if(res.data.data.length>0){
      that.covers = that.currentPage == 1?[]:that.covers;
      that.isLastPage = res.data.is_last_page;
      that.list = that.list.concat(res.data.data);
      let makerarr = [];
      let coversArr = that.list.filter( (item,Lindex) => {
       let obj = {
        width : '60rpx',
        height : '67rpx',
        iconPath : '../../static/index/dot.png',
        latitude : item.location.split(',')[0],
        longitude : item.location.split(',')[1],
        customCallout : {
         anchorY:5,
         anchirX:0,
         display:"NONE"
        },
        id :Lindex
       }
       makerarr.push(obj);
      })
      uni.hideLoading()
      that.covers = that.covers.concat(makerarr);
      return;
      for (var i = 0; i < res.data.data.length; i++) {
       let obj = {
        width : '60rpx',
        height : '67rpx',
        iconPath : '../../static/index/dot.png',
        latitude : res.data.data[i].location.split(',')[0],
        longitude : res.data.data[i].location.split(',')[1],
        customCallout : {
         anchorY:5,
         anchirX:0,
         display:"NONE"
        },
        id :i
       }
       makerarr.push(obj);
      }
      that.covers = that.covers.concat(makerarr);
     }
    })
   },
   markerTap(e){
    let that =this;
    let arr = that.covers;
    arr.find(function(item,index){
     if( index !== e.detail.markerId){
      item.customCallout.display = 'NONE';
      item.width = '60rpx';
      item.height = '67rpx';
     }else{
      item.customCallout.display = 'ALWAYS';
      item.width = '80rpx';
      item.height = '87rpx';
     }
    }); 
    let list = that.list.filter( (item,Lindex) => {
     if(e.detail.markerId !== Lindex){
      item.isSelect = false;
     }else{
      item.isSelect = true;
     }
     return item
    })
    that.list = list;
   },
   jumpPage(e){
    uni.navigateTo({
     url:"/pages/storeDetail/storeDetail?store_id=" + this.list[e.detail.markerId].id
    })
   }
  }
 }
</script>

<style lang="scss">
page {
 background-color: #F4F4F4;
}
cover-view {
 // z-index: 999;
}
.page-body {
 // z-index: 99!important;
}
#map {
 position: fixed;top: 0;
 left: 0;
 // z-index: 99!important;
}
.origin-hover {
 position: fixed;
 right: 30rpx;
 width: 60rpx;
 height: 60rpx;
 top: 400px;
 z-index: 1;border-radius: 50%;
}
.back {
 padding: 30rpx;
 background-color: transparent;
 position: relative;
 // z-index:10!important;
 .row-2 {
  height:0;
  border-top:25rpx solid #fff;
  border-left:20rpx solid transparent;
  border-right:20rpx solid transparent;
  border-bottom:20rpx solid transparent;
  
   position: absolute;
   right: 50%;
   margin-left: -15rpx;
 }
}
.map-dot {
 width: 32rpx;
 height: 32rpx;
}
.callout {
 height: 80rpx;
 background: #FFFFFF;
 padding: 20rpx;
 border-radius: 12rpx;
 display: flex;
 cover-image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;
  border-radius: 4rpx;
 }
 
 .callout-name {
  width: 180rpx;
  
  cover-view:nth-child(1){
   width: 90%;
   font-size: 24rpx;
   font-weight: 500;
   color: #333333;
   line-height: 33rpx;
  }
  cover-view:nth-child(2){
   font-size: 22rpx;
   color: #666666;
   margin-top: 13rpx;
   line-height: 30rpx;
  }
 }
}

.callout::after {
 position: absolute;
 bottom:100%;
 right: 20rpx;
 height:0;
 border: 1rpx solid red;
 border-top:20rpx solid black;
 border-left:18rpx solid transparent;
 border-right:18rpx solid transparent;
 border-bottom:18rpx solid transparent;
}
.search-box {
 margin-top: 450px;
 background-color: #fff;
 width: 100%;
 overflow: scroll;
 padding: 30rpx 0;
 border-radius: 12rpx 12rpx 0 0;
}
.search-input {
 width: 100%;
 padding: 30rpx 0;
 position: fixed;
 top: 0;left: 0;
 background-color: #fff;
 z-index: 10;
 .search-input-box {
  margin: 0 30rpx;
  height: 90rpx;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  border-radius: 12rpx;
 }
 image {
  width: 32rpx;
  height: 32rpx;
  margin: 0 10rpx 0 34rpx;
 }
 input {
  font-size: 24rpx;
  height: 32rpx;
  color: #333333;
  line-height: 90rpx;
  width: 80%;
  
 }
}
// 搜索列表
.search-list-box {
 width: 100%;
 position: absolute;
 background-color: #fff;
 top: 145rpx;
 left: 0;
 z-index: 5;
  
}
.search-item {
 display: flex;
 padding: 30rpx 0;
 margin: 0 30rpx;
 border-bottom: 1rpx solid #efefef;
 // align-items: center;
 image {
  width: 19rpx;
  height: 25rpx;
  margin-right: 18rpx;
  margin-top: 5rpx;
 }
 .active-search {
  color: #FA6400;
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: 30rpx;
 }
 .search-name {
  width: 650rpx;
  text {
   font-weight: normal!important;
   font-size: 24rpx!important;
   margin-left: 12rpx;
   color: #999!important;
  }
  view:nth-child(1){
   font-size: 28rpx;
   font-weight: 500;
   margin-bottom: 4rpx;
   color: #333333;
  }
  view:nth-child(2){
   font-size: 24rpx;
   color: #999999;
   line-height: 33rpx;
  }
 }
}
</style>